<template>
  <div id="home">
    <div class="form">
      <el-form ref="form" :model="form" label-width="130px">
        <el-form-item label="账号或者手机号">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="form.nickname"></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="form.password2"></el-input>
        </el-form-item>
        <el-form-item label="个性签名">
          <el-input type="textarea" v-model="form.signature"></el-input>
        </el-form-item>
      </el-form>
      <div class="but">
        <el-button size="medium" round @click="reguser">注册</el-button>
        <el-button size="medium" round @click="onBlog">返回首页</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../api/request";
import Api from "../api/api";
import qs from "qs";
export default {
  name: "HomeView",
  data() {
    return {
      form: {},
    };
  },
  methods: {
    reguser() {
      let { nickname, username, password, signature } = this.form;
      let params = {
        method: "post",
        url: Api.userReguser,
        data: qs.stringify({ nickname, username, password, signature }),
      };
      request(params)
        .then((result) => {
          if (result.status == 0) {
            this.$message({
              showClose: true,
              message: "注册成功,马上跳转到首页",
              type: "success",
            });
            setTimeout(() => {
              this.$router.push({ name: "blogHome" });
            }, 1000);
          } else if (result.status == 2) {
            this.$message.error(result.message);
          }
        })
        .catch((err) => {});
    },
    onBlog() {
      this.$router.push({ name: "blogHome" });
    },
  },
};
</script>
<style lang="scss" scoped>
#home {
  width: 100%;
  background-color: #e1e1e1;
  display: flex;
  align-items: center;
  height: 100vh;
  .form {
    border: 1px solid #aaa;
    border-radius: 15px;
    background-color: #fff;
    width: 640px;
    padding: 50px 100px 50px 20px;
    margin: auto;
  }
  .but {
    width: 460px;
    padding-left: 180px;
    margin: auto;
    display: flex;
    justify-content: center;
    button {
      width: 120px !important;
    }
  }
}
</style>